<template>
  <div>
    <!-- 查询按钮 -->

    <el-button type="primary" @click="openDrawer">查询</el-button>

    <!-- 抽屉 -->
    <el-drawer :title="title" :before-close="handleClose" :visible.sync="dialog" :close-on-press-escape="false"
      direction="ltr" modal :show-close="false" custom-class="demo-drawer" ref="drawer" size="30%" wrapperClosable>
      <div class="demo-drawer__content">
        <!-- 动态表单 -->
        <el-form :label-suffix="':'" inline label-position="left" :model="form" label-width="80px">
          <el-form-item :abel-width="`${labelWidth}+px`" class="el-form-items" v-for="(label, key, index) in labels" :key="key" :label="label">
            <!-- {{ form[key] }} -->
            <!-- 通过这个地方发现这个是这个正确的 -->
            <el-input v-if="FormDataType[index] === 'number'" v-model="form[key]"   label="label"></el-input>
            <el-input v-else-if="FormDataType[index] === 'string'" v-model="form[key]" autocomplete="off"></el-input>
            <!-- <el-input v-els-if="FormDataType[index] === 'number'" v-model="form[key]" autocomplete="off"></el-input> -->
            <el-select v-else-if="FormDataType[index] === 'array'" v-model="form[key]" placeholder="请选择">
            
              <el-option v-for="option in options[key]" :key="option.value" :label="option.label"
                :value="option.value"></el-option>
            </el-select>

            <el-switch class="el-switchs"  :disabled="true" :width="40" v-else-if="FormDataType[index] === 'boolean'" v-model="form[key]"></el-switch>

            <!-- 时间 -->
            <el-time-picker v-model="form[key]" v-else-if="FormDataType[index] === 'date'"
              :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="请输入正确的时间">
            </el-time-picker>
            <!-- 日期时间格式 -->
            <el-date-picker v-model="form[key]"  v-else-if="FormDataType[index] === 'dateTime'" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
            </el-date-picker>
          </el-form-item>

          <el-form-item class="el-form-items" label="">
      <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div></el-form-item>
        </el-form>

        <!-- 操作按钮 -->
        
      </div>
    </el-drawer>
  </div>
</template>

<script>
import router  from "@/router";
export default {
  props: {
    labelWidth:{
      type: Number,
      default: 100,
      required: false,
    },
    title: {
      type: String,
      default: '参数接收',
      required: false,
    },
    FormData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    labels: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    options: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    FormDataType: {
      type: Array,
      required: false,
      default: [],
    }
  },
  mounted() {
    console.log(router)
    console.log(this.form)
    console.log(this.labels)
    console.log(this.FormDataType[1])
    console.log(this.options)
  },
  data() {
    return {
      dialog: false,
      loading: false,
      form: {}, // 初始化为空对象
      timer: null,
    };
  },
  watch: {
    // 监听 FormData 的变化并同步更新 form
    FormData: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.form = { ...newVal }; // 更新 form 数据
      },
    },
  },
  methods: {
    router() {
      return router
    },

    // 打开抽屉
    openDrawer() {
      this.dialog = true;
    },

    // 关闭抽屉前的确认
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要关闭吗？')
        .then(() => {
          this.cancelForm(); // 调用取消方法重置表单
          done();
        })
        .catch(() => { });
    },

    // 提交表单
    submitForm() {
      this.loading = true;
      this.timer = setTimeout(() => {
        this.$emit('submit', this.form); // 将表单数据传递给父组件
        this.loading = false;
        this.dialog = false;
        this.form = {}
      }, 2000);

    },

    // 取消表单
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
      this.$emit('submit', {});  // 重置表单数据为初始值
    },
  },
};
</script>
<style lang="css">
@import url("@/css/drawForm");
</style>